import React, { useState } from 'react';
import { Button, Modal } from 'antd';
import styles from '../zyd/yd.module.css';

export default function Yxhd() {
    const [isPlatformPromotionVisible, setPlatformPromotionVisible] = useState(false);
    const [isClearanceSaleVisible, setClearanceSaleVisible] = useState(false);
    const [platformPromotionEnrolled, setPlatformPromotionEnrolled] = useState(false);
    const [clearanceSaleEnrolled, setClearanceSaleEnrolled] = useState(false);

    const handlePlatformPromotionCancel = () => {
        setPlatformPromotionVisible(false);
    };

    const handleClearanceSaleCancel = () => {
        setClearanceSaleVisible(false);
    };

    const handlePlatformPromotionEnroll = () => {
        setPlatformPromotionEnrolled(true);
        setPlatformPromotionVisible(false);
    };

    const handleClearanceSaleEnroll = () => {
        setClearanceSaleEnrolled(true);
        setClearanceSaleVisible(false);
    };

    return (
        <React.Fragment>
            <div>
                <div>
                    <img src="/public/1.png" style={{ width: '100%', height: '120px' }} />
                </div>
                <div className={styles.yxhda}>
                    <div className={styles.yxhdb}>
                        <h3>平台大促</h3>
                        <p className={styles.yxhdp}>参加平台限时大促可获得商城首页专属banner等专属资源位，帮助迅速传播商品、累计店铺销量</p>
                        <div className={styles.yxhdc}>
                            <h5>距最近一场报名结束还有9天</h5>
                            {!platformPromotionEnrolled ?
                                <Button color="orange" variant="solid" className={styles.yxhdbu} onClick={() => setPlatformPromotionVisible(true)}>去报名</Button>
                                :
                                <Button disabled style={{ backgroundColor: '#ccc', borderColor: '#ccc', color: '#000' }}>已报名</Button>}
                        </div>
                    </div>
                    <div className={styles.yxhdb}>
                        <h3>降价清仓</h3>
                        <p className={styles.yxhdp}>参加平台限时大促可获得商城首页专属banner等专属资源位，帮助迅速传播商品、累计店铺销量</p>
                        <div className={styles.yxhdc}>
                            <h5>距最近一场报名结束还有9天</h5>
                            {!clearanceSaleEnrolled ?
                                <Button color="orange" variant="solid" className={styles.yxhdbu} onClick={() => setClearanceSaleVisible(true)}>去报名</Button>
                                :
                                <Button disabled style={{ backgroundColor: '#ccc', borderColor: '#ccc', color: '#000' }}>已报名</Button>}
                        </div>
                    </div>
                </div>
            </div>

            {/* 平台大促弹窗 */}
            <Modal
                title="平台大促报名详情"
                visible={isPlatformPromotionVisible}
                onCancel={handlePlatformPromotionCancel}
                footer={[
                    <Button key="back" onClick={handlePlatformPromotionCancel}>
                        取消
                    </Button>,
                    <Button key="submit" type="primary" onClick={handlePlatformPromotionEnroll}>
                        确认
                    </Button>,
                ]}
            >
                <p><strong>活动时间：</strong>2025年5月20日 - 2025年6月1日</p>
                <p><strong>活动规则：</strong></p>
                <ul>
                    <li>参与商家需在活动期间提供至少一款商品参与限时折扣。</li>
                    <li>所有参与商品将在商城首页展示，增加曝光率。</li>
                    <li>商家需提前准备充足的库存，以应对活动期间的大量订单。</li>
                    <li>活动结束后，平台将根据销售数据评选优秀商家，并给予额外奖励。</li>
                </ul>
                <p><strong>注意事项：</strong></p>
                <ul>
                    <li>请确保商品质量符合平台标准，避免因质量问题引发客户投诉。</li>
                    <li>活动期间，商家需保持良好的售后服务，及时处理客户问题。</li>
                    <li>如有任何疑问，请联系平台客服获取帮助。</li>
                </ul>
            </Modal>

            {/* 降价清仓弹窗 */}
            <Modal
                title="降价清仓报名详情"
                visible={isClearanceSaleVisible}
                onCancel={handleClearanceSaleCancel}
                footer={[
                    <Button key="back" onClick={handleClearanceSaleCancel}>
                        取消
                    </Button>,
                    <Button key="submit" type="primary" onClick={handleClearanceSaleEnroll}>
                        确认
                    </Button>,
                ]}
            >
                <p><strong>活动时间：</strong>2025年5月21日 - 2025年6月18日</p>
                <p><strong>活动规则：</strong></p>
                <ul>
                    <li>参与商家需在活动期间提供积压商品进行特价销售。</li>
                    <li>所有参与商品将在商城首页展示，增加曝光率。</li>
                    <li>商家需提前准备充足的库存，以应对活动期间的大量订单。</li>
                    <li>活动结束后，平台将根据销售数据评选优秀商家，并给予额外奖励。</li>
                </ul>
                <p><strong>注意事项：</strong></p>
                <ul>
                    <li>请确保商品质量符合平台标准，避免因质量问题引发客户投诉。</li>
                    <li>活动期间，商家需保持良好的售后服务，及时处理客户问题。</li>
                    <li>如有任何疑问，请联系平台客服获取帮助。</li>
                </ul>
            </Modal>
        </React.Fragment>
    );
}